<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML5 Forms: new attributes and input types</title>
        <link href="description/Galleries.css" type="text/css" rel="Stylesheet" /><link href="description/Layout.css" type="text/css" rel="Stylesheet" /><link href="description/Brand.css" type="text/css" rel="Stylesheet" />
        <link href="description/iframedescription.css" rel="Stylesheet" type="text/css" />
        <script src="description/offline.js" type="text/javascript"></script>
        <style type="text/css">
            #projectInfo {
                overflow: auto;
            }
            #longDesc {
                clear:both;
                margin: 25px 0 10px 0;
            }

            #SampleIndexList{
                margin-left: 15px;
            }
        </style>
    </head>
<body>
    <div id="offlineDescription">
        <h1>HTML5 Forms: new attributes and input types</h1>
        <br/>
        <div id="projectInfo">
            <div class="section">
                    <div class="itemBarLong tagsContainer">
                        <label for="Technologies">Technologies</label>
                        <div id="Technologies">
                            HTML5, CSS3
                        </div>
                    </div>
                    <div class="itemBarLong tagsContainer">
                        <label for="Topics">Topics</label>
                        <div id="Topics">
                            User Interface, HTML5
                        </div>
                    </div>
                <div class="itemBarLong">
                    <label for="Platforms">Platforms</label>
                    <div id="Platforms">
                        Web
                    </div>
                </div>
                <div class="itemBarLong">
                    <label for="Requirements">Requirements</label>
                    <div id="Requirements">
                        
                    </div>
                </div>
                <div class="itemBar">
                    <label for="LastUpdated">Primary Language</label>
                    <div id="LastUpdated">en-US</div>
                </div>
                <div class="itemBar">
                    <label for="LastUpdated">Last Updated</label>
                    <div id="LastUpdated">11/14/2012</div>
                </div>
                <div class="itemBarLong">
                    <label for="License">License</label>
                    <div id="License">
                        <a href="license.rtf">Apache License, Version 2.0</a></div>
                </div>
                <div class="itemBar">
                    <div class="viewonlinecont">
                        <a data-link="online" href="http://code.msdn.microsoft.com/HTML5-Forms-new-attributes-ac0057c3">View this sample online</a>
                    </div>
                </div>
            </div>
        </div>
        
                   
<script type="text/javascript">
    function initializePage() {
        var otherTabClass = 'otherTab';
        var hiddenPreClass = 'hidden';

        var htmlDecode = function(encodedData) {
            var decodedData = "";
            if (encodedData) {
                var div = document.createElement('div');
                div.innerHTML = encodedData;
                decodedData = div.firstChild.nodeValue.replace( /\\r\\n/ig , '\r\n');
            }
            return decodedData;
        };
                
        Galleries.iterateElem(Galleries.findElem(null, 'div', 'scriptcode'), function (index, scriptBlock) {
            var titleElem = Galleries.findElem(scriptBlock, 'div', 'title')[0];
            var labelElems = Galleries.findElem(titleElem, 'span');
            if (labelElems.length == 0) {
                labelElems = titleElem;
            }
            var languageSpans = Galleries.findElem(scriptBlock, 'span', 'hidden');
            var pres = Galleries.findElem(scriptBlock, 'pre');
            if (languageSpans.length > 0 && pres.length > 1) {
                Galleries.iterateElem(labelElems, function(index, elem) {
                    var codePre = pres[index];
                    var labelSpan = elem;
                    var languageSpan = languageSpans[index];
                            
                    elem.code = codePre.innerHTML.replace( /(\r(\n)?)|((\r)?\n)/ig , '\\r\\n');
                            
                    codePre.className = codePre.className.replace(hiddenPreClass, '');
                            
                    languageSpan.parentNode.removeChild(languageSpan);
                });

                pres = Galleries.findElem(scriptBlock, 'pre');
                Galleries.iterateElem(labelElems, function(index, elem) {
                    var codePre = pres[index];
                    var labelSpan = elem;
                    if (index == 0) {
                        scriptBlock.activeTab = 0;
                    }
                    else {
                        labelSpan.className += otherTabClass;
                        codePre.className += hiddenPreClass;
                    }
                    Galleries.attachEventHandler(labelSpan, 'click', function(e) {
                        var activeTab = scriptBlock.activeTab;
                        labelElems[activeTab].className += otherTabClass;
                        pres[activeTab].className += hiddenPreClass;

                        codePre.className = codePre.className.replace(hiddenPreClass, '');
                        labelSpan.className = labelSpan.className.replace(otherTabClass, '');
                        scriptBlock.activeTab = index;
                    });
                });

                var preview = Galleries.findElem(scriptBlock, 'div', 'preview');
                if (preview.length == 0) {
                    preview.push(pres[pres.length - 1]);
                }
                Galleries.iterateElem(preview, function(index, elem) {
                    elem.parentNode.removeChild(elem);
                });

                if (window.clipboardData && clipboardData.setData) {
                    var copyLink = document.createElement('a');
                    copyLink.href = 'javascript:void(0);';
                    copyLink.className = 'copyCode';
                    copyLink.innerHTML = 'Copy Code';
                    Galleries.attachEventHandler(copyLink, 'click', function (e) {
                        clipboardData.setData("Text", htmlDecode(labelElems[scriptBlock.activeTab].code));
                        return false;
                    });
                    scriptBlock.insertBefore(copyLink, scriptBlock.childNodes[0]);
                }
            }
        });
    }

    Galleries.onWindowLoad(function(){
        initializePage();
    });

</script>
<div id="longDesc">
    
<h1>HTML5 Form Attributes&nbsp;</h1>
<hr>
<h2><span style="color:#003366">required</span></h2>
<p>Tells the browser to only submit the form if the field in question is filled out correctly. If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element and show the required message.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; required aria-required=&quot;true&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;text&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;required&nbsp;<span class="html__attr_name">aria-required</span>=<span class="html__attr_value">&quot;true&quot;</span><span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<div class="endscriptcode"><img id="70490" src="description/input text and required [ie].JPG" alt="" width="492" height="105"></div>
<p><strong>Styles</strong>: You can style the required elements with the proper pseudo clasess.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>CSS</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">css</span>
<pre class="hidden">input:required 
{ 
    background-color: orange; 
} 
input:focus:invalid 
{ 
    background-color: red; 
} 
input:focus:valid 
{ 
    background-color: green; 
}</pre>
<div class="preview">
<pre class="css"><span class="css__element">input</span><span class="css__pseudo">:required</span>&nbsp;&nbsp;
{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">background-color:</span>&nbsp;orange;&nbsp;&nbsp;
}&nbsp;&nbsp;
<span class="css__element">input</span><span class="css__pseudo">:focus</span><span class="css__pseudo">:invalid</span>&nbsp;&nbsp;
{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">background-color:</span>&nbsp;<span class="css__color">red</span>;&nbsp;&nbsp;
}&nbsp;&nbsp;
<span class="css__element">input</span><span class="css__pseudo">:focus</span><span class="css__pseudo">:valid</span>&nbsp;&nbsp;
{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">background-color:</span>&nbsp;<span class="css__color">green</span>;&nbsp;&nbsp;
}</pre>
</div>
</div>
</div>
<p>To change the default required message you can use the setCustomValidity() javascript function:</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>JavaScript</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">js</span>
<pre class="hidden">var name = document.getElementById(&quot;name&quot;);
name.setCustomValidity(&quot;CUTOM ERROR MESSAGE&quot;);</pre>
<div class="preview">
<pre class="js"><span class="js__statement">var</span>&nbsp;name&nbsp;=&nbsp;document.getElementById(<span class="js__string">&quot;name&quot;</span>);&nbsp;
name.setCustomValidity(<span class="js__string">&quot;CUTOM&nbsp;ERROR&nbsp;MESSAGE&quot;</span>);</pre>
</div>
</div>
</div>
<h2><span style="color:#003366">placeholder</span></h2>
<p>Defines an example text to be displayed inside of an input field. The placeholder text is displayed with the specified style until the field has focus.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input name=&quot;url&quot; type=&quot;url&quot; placeholder=&quot;http://www.microsoft.com&quot; /&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;url&quot;</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;url&quot;</span>&nbsp;<span class="html__attr_name">placeholder</span>=<span class="html__attr_value">&quot;http://www.microsoft.com&quot;</span>&nbsp;<span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<div class="endscriptcode">&nbsp;<img id="70492" src="description/input url and placeholder [ie].jpg" alt="" width="492" height="61"></div>
<p><strong>Styles</strong>: you can style it however you want with Cascading Style Sheets (CSS) by using the :<em>-ms-input-placeholder
</em>pseudo-class selector.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>CSS</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">css</span>
<pre class="hidden">input.url:-ms-input-placeholder 
{ 
    background-color:#ddff00; 
    color:#0000ff; 
}</pre>
<div class="preview">
<pre class="css"><span class="css__element">input</span><span class="css__class">.url</span>:-<span class="css__element">ms</span>-<span class="css__element">input</span>-<span class="css__element">placeholder</span>&nbsp;&nbsp;
{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">background-color:</span><span class="css__color">#ddff00</span>;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">color:</span><span class="css__color">#0000ff</span>;&nbsp;&nbsp;
}</pre>
</div>
</div>
</div>
<h2><span style="color:#003366">pattern</span></h2>
<p>Allows you to define a regular expression that the user's input must match.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;tel&quot; name=&quot;tel&quot; pattern=&quot;\(\d\d\d\) \d\d\d\-\d\d\d\d&quot; /&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;tel&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;tel&quot;</span>&nbsp;<span class="html__attr_name">pattern</span>=<span class="html__attr_value">&quot;\(\d\d\d\)&nbsp;\d\d\d\-\d\d\d\d&quot;</span>&nbsp;<span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">disabled</span></h2>
<p>The user can't edit the text in the control. Form controls with the disabled attribute aren&rsquo;t submitted along with the form.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; disabled&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;text&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;disabled<span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<p><strong>Styles</strong>: you can employ the <em>:disabled </em>pseudo-class in your CSS to style disabled form controls.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>CSS</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">css</span>
<pre class="hidden">input:disabled {
    background-color: #dddddd;        
}</pre>
<div class="preview">
<pre class="css"><span class="css__element">input</span><span class="css__pseudo">:disabled</span>&nbsp;{&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="css__property">background-color:</span>&nbsp;<span class="css__color">#dddddd</span>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
}</pre>
</div>
</div>
</div>
<p><img id="70564" src="description/input text disabled [ie].jpg" alt="" width="242" height="55"></p>
<h2><span style="color:#003366">readonly</span></h2>
<p>This is similar to the disabled attribute, the user can't edit the form field, however, the field can receive focus and its value is submitted with the form.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; readonly=&quot;true&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;text&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;name&quot;</span>&nbsp;<span class="html__attr_name">readonly</span>=<span class="html__attr_value">&quot;true&quot;</span><span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<h2><img id="70565" src="description/input text readonly [ie].jpg" alt="" width="241" height="55"></h2>
<h2><span style="color:#003366">multiple</span></h2>
<p>Indicates that multiple values can be entered in a form control. It can be added to email and file input types as well.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; multiple &gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;multiple&nbsp;<span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">form</span></h2>
<p>Allows you to associate form elements with forms in which they&rsquo;re not nested.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; form=&quot;form1&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">form</span>=<span class="html__attr_value">&quot;form1&quot;</span><span class="html__tag_start">&gt;</span>&nbsp;</pre>
</div>
</div>
</div>
<h2><span style="color:#003366">autocomplete</span></h2>
<p>Specifies whether the form or a form control, should have autocomplete functionality. By default, autocomplete is on. To disable it, use autocomplete=&quot;off&quot;.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;form autocomplete=&quot;off&quot;&gt;

&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; autocomplete=&quot;off&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;form</span>&nbsp;<span class="html__attr_name">autocomplete</span>=<span class="html__attr_value">&quot;off&quot;</span><span class="html__tag_start">&gt;&nbsp;
</span>&nbsp;
<span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">autocomplete</span>=<span class="html__attr_value">&quot;off&quot;</span><span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">autofocus</span></h2>
<p>Enables you to guide the user to a specific field by directing focus to a field or control after a webpage loads. Only one control in a document can have autofocus specified. If more than one element has the attribute, only the first one on the page gets
 the focus when the page opens.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; autofocus&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;autofocus<span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">list</span></h2>
<p>Takes as its value the id attribute of the datalist you want to associate with the input. The datalist element is a list of options that will display a simple text field that drops down a list of suggested answers when focused.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;url&quot; list=&quot;urls&quot; id=&quot;website&quot; Name=&quot;website&quot;&gt;

&lt;datalist id=&quot;urls&quot;&gt; 
    &lt;option value=&quot;http://www.site1.com&quot;&gt; 
    &lt;option value=&quot;http://www.site2.com&quot;&gt; 
    &lt;option value=&quot;http://www.site3.com&quot;&gt;  
&lt;/datalist&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;url&quot;</span>&nbsp;<span class="html__attr_name">list</span>=<span class="html__attr_value">&quot;urls&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;website&quot;</span>&nbsp;<span class="html__attr_name">Name</span>=<span class="html__attr_value">&quot;website&quot;</span><span class="html__tag_start">&gt;&nbsp;
</span>&nbsp;
<span class="html__tag_start">&lt;datalist</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;urls&quot;</span><span class="html__tag_start">&gt;&nbsp;</span>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="html__tag_start">&lt;option</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;http://www.site1.com&quot;</span><span class="html__tag_start">&gt;&nbsp;</span>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="html__tag_start">&lt;option</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;http://www.site2.com&quot;</span><span class="html__tag_start">&gt;&nbsp;</span>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<span class="html__tag_start">&lt;option</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;http://www.site3.com&quot;</span><span class="html__tag_start">&gt;&nbsp;</span>&nbsp;&nbsp;
<span class="html__tag_end">&lt;/datalist&gt;</span></pre>
</div>
</div>
</div>
<p>This is how Microsoft IE 10 displays it:</p>
<p><img id="70493" src="description/input url and datalist [ie].jpg" alt="" width="356" height="109"></p>
<h2><span style="color:#003366">min, max, and step</span></h2>
<p>These are applicable to input controls whose type attribute has been set to number or range. The min and max attributes define the minimum and maximum values that will be accepted. The step attribute defines the allowed interval between values.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;number&quot; min=&quot;0&quot; max=&quot;10&quot; step=&quot;2&quot;/&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;number&quot;</span>&nbsp;<span class="html__attr_name">min</span>=<span class="html__attr_value">&quot;0&quot;</span>&nbsp;<span class="html__attr_name">max</span>=<span class="html__attr_value">&quot;10&quot;</span>&nbsp;<span class="html__attr_name">step</span>=<span class="html__attr_value">&quot;2&quot;</span><span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">novalidate</span></h2>
<p>Can be set on form elements that have validation constraints to allow the form to be submitted without validation.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;form novalidate&gt; 
   ...
&lt;/form&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;form</span>&nbsp;novalidate<span class="html__tag_start">&gt;&nbsp;</span>&nbsp;
&nbsp;&nbsp;&nbsp;...&nbsp;
<span class="html__tag_end">&lt;/form&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">formnovalidate</span></h2>
<p>Useful for Save for Latter button. on the button that saves the form for later.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;submit&quot; formnovalidate name=&quot;save&quot; value=&quot;Save for Later&quot; /&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;submit&quot;</span>&nbsp;formnovalidate&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;save&quot;</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;Save&nbsp;for&nbsp;Later&quot;</span>&nbsp;<span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<h1>New input types&nbsp;</h1>
<hr>
<p>HTML5 has 13 new input types:</p>
<ul>
<li>search </li><li>email </li><li>url </li><li>tel </li><li>number </li><li>range </li><li>color </li><li>date </li><li>datetime </li><li>month </li><li>week </li><li>time </li><li>datetime-local </li></ul>
<h2><span style="color:#003366">Search</span></h2>
<p>The search input type (type=&quot;search&quot;) provides a search field for entering one or more search terms. While you can use type=&quot;text&quot; for search fields, the new search type provides an interface the user is accustomed to.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;search&quot; value=&quot;Search&quot; id=&quot;searchSite&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;search&quot;</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;Search&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;searchSite&quot;</span><span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<div class="endscriptcode">&nbsp;<img id="70500" src="description/input search [ie].jpg" alt="" width="168" height="61"></div>
<h2><span style="color:#003366">email</span></h2>
<p>Used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;email&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;email&quot;</span><span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<h2><span style="color:#003366">url</span></h2>
<p>Indicates that the field must accept a fully qualified web address, such as &quot;http://www.microsoft.com&quot;.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;url&quot; name=&quot;myUrl&quot;/&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;url&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;myUrl&quot;</span><span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<p><img id="70499" src="description/input url [ie].jpg" alt="" width="473" height="60"></p>
<h2><span style="color:#003366">tel</span></h2>
<p>Indicates that the field accepts a telephone number the tel type doesn&rsquo;t enforce a particular syntax or pattern because telephone numbers can have different formats. If you need to force a particular format, use the pattern attribute.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input id=&quot;work_phone&quot; type=&quot;tel&quot; required placeholder=&quot;(555) 555-5555&quot;/&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;work_phone&quot;</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;tel&quot;</span>&nbsp;required&nbsp;<span class="html__attr_name">placeholder</span>=<span class="html__attr_value">&quot;(555)&nbsp;555-5555&quot;</span><span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<p><img id="70498" src="description/input tel [ie].jpg" alt="" width="240" height="55"></p>
<h2><span style="color:#003366">number</span></h2>
<p>It requires that the value attribute, if specified and not empty, have a valid floating point number.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;number&quot; name=&quot;quantity&quot; value=&quot;10&quot; /&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;number&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;quantity&quot;</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;10&quot;</span>&nbsp;<span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<p>This is how Microsoft IE 10 displays the number control:</p>
<p><img id="70497" src="description/input number [ie].jpg" alt="" width="168" height="61"></p>
<p>This is how Google Chrome displays it:</p>
<p><img id="70495" src="description/input number [chrome].jpg" alt="" width="102" height="56"></p>
<h2><span style="color:#003366">range</span></h2>
<p>Gives you the ability to easily create a range or slider input control. The range control takes four attributes&mdash;min, max, step, and value&mdash;to define the value range and resolution of the control.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;5&quot; value=&quot;50&quot;/&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;range&quot;</span>&nbsp;<span class="html__attr_name">min</span>=<span class="html__attr_value">&quot;0&quot;</span>&nbsp;<span class="html__attr_name">max</span>=<span class="html__attr_value">&quot;100&quot;</span>&nbsp;<span class="html__attr_name">step</span>=<span class="html__attr_value">&quot;5&quot;</span>&nbsp;<span class="html__attr_name">value</span>=<span class="html__attr_value">&quot;50&quot;</span><span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<h3><img id="70494" src="description/input range [ie].jpg" alt="" width="304" height="76"></h3>
<h2><span style="color:#003366">color</span></h2>
<p>Provides the user with a color picker. The color picker should return a hexadecimal RGB color value, such as #FFFF00.&nbsp;</p>
<p>&nbsp;</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;color&quot; name=&quot;color&quot; id=&quot;color&quot; /&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;color&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;color&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;color&quot;</span>&nbsp;<span class="html__tag_start">/&gt;</span></pre>
</div>
</div>
</div>
<p>This is how Google Chrome displays the color control:</p>
<p><img id="70501" src="description/input color [chrome].jpg" alt="" width="575" height="356"></p>
<h2><span style="color:#003366">date</span></h2>
<p>This includes the date: year, month, and day, but no time; for example, 2012-11-22.</p>
<div class="scriptcode">
<div class="pluginEditHolder" pluginCommand="mceScriptCode">
<div class="title"><span>HTML</span></div>
<div class="pluginLinkHolder"><span class="pluginEditHolderLink">Edit</span>|<span class="pluginRemoveHolderLink">Remove</span></div>
<span class="hidden">html</span>
<pre class="hidden">&lt;input type=&quot;date&quot; id=&quot;startdate&quot; name=&quot;startdate&quot; min=&quot;2012-01-01&quot; max=&quot;2012-01-31&quot; required&gt;</pre>
<div class="preview">
<pre class="html"><span class="html__tag_start">&lt;input</span>&nbsp;<span class="html__attr_name">type</span>=<span class="html__attr_value">&quot;date&quot;</span>&nbsp;<span class="html__attr_name">id</span>=<span class="html__attr_value">&quot;startdate&quot;</span>&nbsp;<span class="html__attr_name">name</span>=<span class="html__attr_value">&quot;startdate&quot;</span>&nbsp;<span class="html__attr_name">min</span>=<span class="html__attr_value">&quot;2012-01-01&quot;</span>&nbsp;<span class="html__attr_name">max</span>=<span class="html__attr_value">&quot;2012-01-31&quot;</span>&nbsp;required<span class="html__tag_start">&gt;</span></pre>
</div>
</div>
</div>
<div class="endscriptcode">&nbsp;This is how Google Chrome displays the date control:</div>
<div class="endscriptcode"><img id="70502" src="description/input date [chrome].jpg" alt="" width="293" height="348"></div>
<h2><span style="color:#003366">datetime</span></h2>
<p>This includes both the date and time, separated by a &ldquo;T&rdquo;, and followed by either a &ldquo;Z&rdquo; to represent UTC, or by a time zone specified with a &#43; or - character.For example, &ldquo;2012-01-17T10:45-5:00&rdquo;.</p>
<h2><span style="color:#003366">datetime-local</span></h2>
<p>Identical to datetime, except that it omits the time zone.</p>
<h2><span style="color:#003366">month</span></h2>
<p>Only includes the year and month; for example, 2011-11.</p>
<h2><span style="color:#003366">week</span></h2>
<p>This covers the year and week number from 1 to 52; for example, 2012-W03.</p>
<h2><span style="color:#003366">time</span></h2>
<p>A time of day, using the military format (24-hour clock); for example, 21:00 instead of 09.00 p.m.</p>

</div>


    </div>
</body>
</html>
